/* ==========================================================================
   dashboard-home.css — the home dashboard (index.html) ONLY.
   Every selector is prefixed .dh- and the whole screen is wrapped in .dh-wrap,
   so nothing here can reach another page. To revert: unlink this file and
   restore the previous index.html; no other page references it.
   Loaded AFTER style.css and theme-hrms.css, whose kōami tokens it reuses.

   ⭐ SIZED TO FIT ONE SCREEN. The working target is a 14"/15" laptop at 2x —
   about 1470 x 800 CSS px of viewport, and roughly 720px of page once the top
   bar is subtracted. Everything below is scaled to land the KPI row, the whole
   board and the glance strip inside that. Two consequences worth knowing before
   changing any number here:
     · the KPI row must stay SEVEN across down to 1100px. The first version
       broke to four at 1500px, which on exactly this laptop wrapped the row
       4 + 3 and left half of row two empty — the "completely disturbed" look.
     · the type scale is deliberately small (11–18px). Raising it re-introduces
       vertical scrolling on the same machine.
   ========================================================================== */

/* ⚠️ THE ONLY TWO UNPREFIXED SELECTORS IN THIS FILE, AND THEY ARE SAFE BECAUSE
   ONLY THE TWO DASHBOARDS LOAD IT — index.html and doctor-view.html (verify with
   `grep -rl dashboard-home.css`), and both want exactly this.
   The legacy shell puts a 10px band above and below `.pcoded-inner-content` and
   its own padding on `.page-wrapper`; together that is ~30px of the single
   viewport this board has to fit inside, spent on nothing. This screen manages
   its own outer spacing. Do not move these rules into a shared stylesheet. */
.pcoded-inner-content { padding-top: 0 !important; padding-bottom: 0 !important; }
.page-wrapper.dh-wrap { padding: 8px 12px 8px !important; }

.dh-wrap {
  --dh-bg: #f6f7fb;
  --dh-card: #ffffff;
  --dh-bd: #e8eaf1;
  --dh-text: #16203f;
  --dh-muted: #6b7391;
  --dh-dim: #9aa1b8;
  --dh-up: #16a34a;
  --dh-down: #e11d48;
  --dh-radius: 12px;
  --dh-shadow: 0 1px 2px rgba(18, 26, 40, .04), 0 4px 12px rgba(18, 26, 40, .04);
  /* accents — one hue per tile, reused by the charts so a colour always means
     the same metric across the screen */
  --dh-blue: #3b82f6;
  --dh-green: #22c55e;
  --dh-violet: #8b5cf6;
  --dh-amber: #f59e0b;
  --dh-teal: #14b8a6;
  --dh-pink: #ec4899;
  --dh-indigo: #6366f1;
  --dh-navy: #2B4C7E;
  padding: 9px 12px 8px;
  background: var(--dh-bg);
  color: var(--dh-text);
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  min-height: 100%;
}

/* ---------- generic card ------------------------------------------------- */
.dh-card {
  background: var(--dh-card);
  border: 1px solid var(--dh-bd);
  border-radius: var(--dh-radius);
  box-shadow: var(--dh-shadow);
  padding: 9px 11px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.dh-card-h {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.dh-card-h h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--dh-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dh-card-h h3 span { font-weight: 500; color: var(--dh-muted); font-size: 11.5px; }
.dh-card-h .dh-ic { color: var(--dh-blue); font-size: 13px; }
.dh-card-h .dh-link {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--dh-blue);
  cursor: pointer;
  white-space: nowrap;
}
.dh-card-h .dh-link:hover { text-decoration: underline; }

/* ---------- period filter bar -------------------------------------------
   Presets and the exact range are BOTH always visible: the old dashboard's
   bar worked that way and picking a range should never cost an extra click
   through a dropdown. */
.dh-filter {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.dh-filter-l {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--dh-muted);
  white-space: nowrap;
}
.dh-filter-l i { font-size: 14px; color: var(--dh-navy); }
.dh-seg {
  display: inline-flex;
  background: #edeff5;
  border: 1px solid var(--dh-bd);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.dh-seg button {
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: 7px;
  padding: 5px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--dh-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: .15s;
}
.dh-seg button:hover:not(.on) { color: var(--dh-navy); }
.dh-seg button.on {
  background: #fff;
  color: var(--dh-navy);
  box-shadow: 0 1px 3px rgba(18, 26, 40, .14);
}
.dh-dates {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--dh-dim);
}
.dh-dates input[type="date"] {
  border: 1px solid var(--dh-bd);
  background: #fff;
  border-radius: 9px;
  padding: 6px 9px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--dh-text);
  outline: none;
  box-shadow: var(--dh-shadow);
}
.dh-dates input[type="date"]:focus { border-color: var(--dh-blue); }
.dh-apply {
  border: 0;
  background: var(--dh-navy);
  color: #fff;
  border-radius: 9px;
  padding: 7px 16px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.dh-apply:hover { background: #1E3A5F; }
.dh-filter-sp { flex: 1 1 auto; }
.dh-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--dh-card);
  border: 1px solid var(--dh-bd);
  border-radius: 10px;
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--dh-text);
  box-shadow: var(--dh-shadow);
  white-space: nowrap;
}
.dh-pill:hover { color: var(--dh-navy); text-decoration: none; }
.dh-pill i { color: var(--dh-muted); font-size: 14px; }

/* ---------- KPI row ------------------------------------------------------ */
.dh-kpis {
  display: grid;
  /* --dh-kpi-n is set from JS to the number of tiles this ROLE actually sees, so
     a five-tile dashboard fills the row instead of leaving two empty cells. */
  grid-template-columns: repeat(var(--dh-kpi-n, 7), minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 9px;
}
.dh-kpi {
  border: 1px solid var(--dh-bd);
  border-radius: var(--dh-radius);
  padding: 6px 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  box-shadow: var(--dh-shadow);
  background: color-mix(in srgb, var(--k) 8%, #fff);
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.dh-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(18, 26, 40, .10);
  color: inherit;
  text-decoration: none;
}
.dh-kpi-ic {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--k);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex: 0 0 auto;
}
.dh-kpi-b { min-width: 0; flex: 1 1 auto; }
.dh-kpi-l {
  display: block;
  font-size: 10.5px;
  color: var(--dh-muted);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dh-kpi-v {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dh-delta { font-size: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-delta i { font-size: 9px; }
.dh-delta.up { color: var(--dh-up); }
.dh-delta.down { color: var(--dh-down); }
.dh-delta.flat { color: var(--dh-dim); }
.dh-delta small { color: var(--dh-dim); font-weight: 500; }

/* ---------- the 12-column board ------------------------------------------ */
/* ⚠️ COLUMN SPANS, NOT `grid-template-areas` — AND THAT IS LOAD-BEARING.
   Cards are hidden per role (a unit with no beds and no radiology should not be
   shown either card), and a named area leaves a HOLE in the board when its item
   is display:none. Spans placed by normal auto-flow simply close up.
   With the DOM order trend, dept, beds, over, alerts, appts, coll, svc, quick,
   glance these spans reproduce the intended board exactly:
     row 1  trend(5, 2 rows) dept(3, 2 rows) beds(2) over(2)
     row 2  …trend… …dept…   alerts(4)
     row 3  appts(3) coll(3) svc(2) quick(4)
     row 4  glance(12)
   `.dh-grid.compact` drops the two row-spans, used when any right-column card is
   hidden and there is no longer a second band for trend/dept to span into. */
.dh-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 9px;
  /* stretch, not start: the right-hand column (bed + overview + alerts) is
     taller than the trend and donut cards beside it, and `start` left a band of
     dead space under both. */
  align-items: stretch;
}
.dh-trend { grid-column: span 5; grid-row: span 2; }
.dh-dept { grid-column: span 3; grid-row: span 2; }
.dh-beds { grid-column: span 2; }
.dh-over { grid-column: span 2; }
.dh-alerts { grid-column: span 4; }
.dh-appts { grid-column: span 3; }
.dh-coll { grid-column: span 3; }
.dh-svc { grid-column: span 2; }
.dh-quick { grid-column: span 4; }
.dh-glance { grid-column: span 12; }
.dh-grid.compact .dh-trend,
.dh-grid.compact .dh-dept { grid-row: auto; }
.dh-hide { display: none !important; }

/* ---------- line chart --------------------------------------------------- */
/* height is pinned from renderChart() — see the note there about viewBox and
   intrinsic aspect ratio. Do not add a min-height back. */
.dh-chart { width: 100%; display: block; overflow: visible; }
.dh-chart .grid { stroke: #eef0f6; stroke-width: 1; }
.dh-chart .axis { fill: var(--dh-dim); font-size: 10px; }
.dh-chart .pt-l { fill: var(--dh-text); font-size: 10px; font-weight: 600; }

/* ---------- donut -------------------------------------------------------- */
.dh-donut-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: 1 1 auto; }
.dh-donut { width: 112px; height: 112px; flex: 0 0 auto; }
.dh-donut-c { fill: var(--dh-text); font-weight: 700; font-size: 20px; }
.dh-donut-s { fill: var(--dh-dim); font-size: 9px; font-weight: 500; }
.dh-legend { flex: 1 1 130px; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.dh-legend-i { display: flex; align-items: center; gap: 7px; font-size: 11.5px; }
.dh-dot { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto; }
.dh-legend-n { color: var(--dh-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.dh-legend-v { color: var(--dh-text); font-weight: 600; white-space: nowrap; }
.dh-legend-v small { color: var(--dh-dim); font-weight: 500; }

/* ---------- stat rows (bed status / patient overview) -------------------- */
.dh-stat {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 1px 0;
  border-bottom: 1px solid #f1f2f7;
  font-size: 11.5px;
  line-height: 1.25;
}
.dh-stat:last-child { border-bottom: 0; }
.dh-stat-ic {
  width: 19px; height: 19px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; flex: 0 0 auto;
  background: color-mix(in srgb, var(--k, var(--dh-blue)) 12%, #fff);
  color: var(--k, var(--dh-blue));
}
.dh-stat-l { color: var(--dh-muted); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-stat-v { font-weight: 700; font-size: 12.5px; line-height: 1.25; white-space: nowrap; }
.dh-stat-v small { font-size: 10px; font-weight: 600; margin-left: 3px; }

/* ---------- alerts ------------------------------------------------------- */
.dh-alert-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; align-content: space-around; flex: 1 1 auto; }
.dh-alert {
  display: flex; align-items: center; gap: 7px;
  padding: 2px 0; font-size: 11.5px; line-height: 1.25;
  text-decoration: none; color: inherit; min-width: 0;
}
.dh-alert:hover { color: var(--dh-blue); text-decoration: none; }
.dh-alert i { color: var(--k); font-size: 13px; flex: 0 0 auto; }
/* `:not(.dh-badge)` matters: `.dh-alert span` (0,1,1) outranks `.dh-badge` (0,1,0),
   so without it the count pill inherits `flex: 1 1 auto` and stretches across the
   row instead of hugging its number — obvious the moment the card is one column. */
.dh-alert > span:not(.dh-badge) { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-badge {
  background: color-mix(in srgb, var(--k) 14%, #fff);
  color: var(--k);
  border-radius: 999px;
  min-width: 21px;
  padding: 1px 6px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  flex: 0 0 auto;
}

/* ---------- appointments ------------------------------------------------- */
.dh-appt { display: flex; align-items: center; gap: 8px; padding: 3px 0; border-bottom: 1px solid #f1f2f7; }
.dh-appt:last-child { border-bottom: 0; }
.dh-av {
  width: 22px; height: 22px; border-radius: 999px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff;
}
.dh-appt-b { flex: 1 1 auto; min-width: 0; }
.dh-appt-n { font-size: 11.5px; line-height: 1.2; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-appt-s { font-size: 10px; line-height: 1.2; color: var(--dh-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-appt-r { text-align: right; flex: 0 0 auto; }
.dh-appt-t { font-size: 10.5px; line-height: 1.2; color: var(--dh-muted); }
.dh-tag { font-size: 10px; line-height: 1.2; font-weight: 600; }
.dh-tag.ok { color: var(--dh-up); }
.dh-tag.warn { color: var(--dh-amber); }
.dh-tag.off { color: var(--dh-dim); }

/* ---------- collection --------------------------------------------------- */
.dh-coll-hero {
  display: flex; align-items: center; gap: 10px;
  background: #f3fbf5; border: 1px solid #dcf0e3;
  border-radius: 10px; padding: 5px 9px; margin-bottom: 5px;
}
.dh-coll-hero .dh-kpi-ic { background: var(--dh-green); width: 26px; height: 26px; font-size: 12px; }
.dh-coll-hero-l { font-size: 10.5px; color: var(--dh-muted); }
.dh-coll-hero-v { font-size: 15.5px; font-weight: 700; letter-spacing: -.4px; line-height: 1.2; }
.dh-coll-row {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 2px 2px; font-size: 11.5px; line-height: 1.3; border-bottom: 1px solid #f1f2f7;
}
.dh-coll-row span { color: var(--dh-muted); }
.dh-coll-row b { font-weight: 600; }
.dh-coll-row.total { border-bottom: 0; border-top: 1px solid var(--dh-bd); margin-top: 2px; padding-top: 5px; }
.dh-coll-row.total span { color: var(--dh-text); font-weight: 700; }
.dh-coll-row.total b { color: var(--dh-blue); font-weight: 700; }

/* ---------- top services ------------------------------------------------- */
.dh-svc-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.dh-svc-rank { color: var(--dh-dim); font-size: 11px; width: 9px; flex: 0 0 auto; }
.dh-svc-ic {
  width: 23px; height: 23px; border-radius: 7px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  background: color-mix(in srgb, var(--k) 12%, #fff); color: var(--k);
}
.dh-svc-b { flex: 1 1 auto; min-width: 0; }
.dh-svc-n { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; line-height: 1.25; font-weight: 600; margin-bottom: 3px; }
.dh-svc-n em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-bar { height: 3px; border-radius: 999px; background: #eef0f6; overflow: hidden; }
.dh-bar i { display: block; height: 100%; border-radius: 999px; background: var(--k); }

/* ---------- quick actions ------------------------------------------------ */
.dh-quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; flex: 1 1 auto; align-content: start; }
.dh-qa {
  border-radius: 10px;
  padding: 5px 4px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-decoration: none; text-align: center;
  background: color-mix(in srgb, var(--k) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--k) 16%, #fff);
  transition: transform .15s ease, box-shadow .15s ease;
  min-width: 0;
}
.dh-qa:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(18, 26, 40, .10); text-decoration: none; }
.dh-qa i { font-size: 15px; color: var(--k); }
.dh-qa span {
  font-size: 10.5px; font-weight: 600; color: var(--dh-text); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}

/* ---------- at a glance -------------------------------------------------- */
.dh-glance-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }
/* The value and its sparkline sit SIDE BY SIDE, not stacked: stacked, this strip
   cost 118px of the one screen the whole board has to fit into. */
.dh-gl { border: 1px solid var(--dh-bd); border-radius: 10px; padding: 6px 9px; min-width: 0; }
.dh-gl-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.dh-gl-l { font-size: 10px; color: var(--dh-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-gl-b { display: flex; align-items: flex-end; gap: 8px; }
.dh-gl-v { font-size: 16px; font-weight: 700; letter-spacing: -.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 0 auto; }
.dh-gl-s { flex: 1 1 auto; min-width: 0; }
.dh-gl svg { width: 100%; height: 22px; display: block; }

/* ---------- states + footer ---------------------------------------------- */
.dh-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 14px 8px; color: var(--dh-dim); font-size: 11.5px; text-align: center;
  flex: 1 1 auto;
}
.dh-empty i { font-size: 17px; }
.dh-skel { border-radius: 6px; background: linear-gradient(90deg, #eef0f6 25%, #f6f7fb 50%, #eef0f6 75%); background-size: 400% 100%; animation: dhShimmer 1.3s ease infinite; height: 10px; margin: 6px 0; }
@keyframes dhShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.dh-foot {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--dh-bd);
  font-size: 10px; color: var(--dh-dim);
}

/* ---------- responsive ---------------------------------------------------
   ⚠️ The KPI row holds SEVEN across all the way down to 1100px. It used to
   break at 1500px, which is above the width of the laptop this is used on, so
   the row wrapped 4 + 3 with half of the second row empty. Do not raise this. */
@media (max-width: 1100px) {
  .dh-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dh-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dh-trend { grid-column: span 4; grid-row: auto; }
  .dh-dept { grid-column: span 2; grid-row: auto; }
  .dh-beds, .dh-over { grid-column: span 3; }
  .dh-alerts, .dh-quick { grid-column: span 3; }
  .dh-appts, .dh-coll, .dh-svc { grid-column: span 2; }
  .dh-glance { grid-column: span 6; }
  .dh-glance-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .dh-wrap { padding: 10px 10px 16px; }
  .dh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dh-grid { grid-template-columns: minmax(0, 1fr); }
  .dh-grid > * { grid-column: span 1 !important; grid-row: auto !important; }
  .dh-glance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Two glance cards to a row leaves the label and the delta fighting over
     ~150px and the label ends up as "M…". Stack them, drop the caption. */
  .dh-gl-h { flex-direction: column; align-items: flex-start; gap: 1px; }
  .dh-gl-l { white-space: normal; }
  .dh-gl .dh-delta small { display: none; }
  .dh-alert-grid { grid-template-columns: 1fr; }
  .dh-chart { min-height: 180px; }
  .dh-filter { gap: 7px; }
  .dh-seg { flex: 1 1 100%; justify-content: space-between; }
  .dh-seg button { flex: 1 1 auto; padding: 6px 4px; }
  .dh-dates { flex: 1 1 auto; }
  .dh-dates input[type="date"] { flex: 1 1 auto; min-width: 0; }
}
@media (max-width: 560px) {
  .dh-kpis { grid-template-columns: minmax(0, 1fr); }
  .dh-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* color-mix has no fallback in older engines; give every tinted surface a plain
   white base first so a browser that drops the declaration still renders. */
@supports not (background: color-mix(in srgb, red 10%, white)) {
  .dh-kpi, .dh-qa, .dh-stat-ic, .dh-svc-ic, .dh-badge { background: #f6f7fb; }
}